<template>
  <h1>属性绑定指令</h1>
  <input type="text" value="info">
<!--  将input元素的value属性与info变量进行绑定，由info变量来控制输入框的默认值-->
  <input type="text" v-bind:value="info">
  <input type="text" :value="info">
  <hr>
<!--  此处的url是一个字符串-->
  <a href="url" target="_blank">url</a><br>
<!--  此处的url是一个响应式变量，由url来控制超链接的跳转位置-->
<!--  :href=""是v-bind:href=""的简写，两种方式是等价的-->
  <a :href="url" target="_blank">url</a>
</template>

<script setup>
  import {ref} from "vue";

  const info =ref('123');

  const url = ref('https://www.baidu.com');
  url.value = 'https://www.bilibili.com';//JS中使用响应式变量，必须.value
</script>


<style scoped>

</style>